<template>
  <div class="product-wrapper">
    <div class="content-wrap"
         @click="handleclick(shopInfo)">
      <div class="img-wrap"
           aspectratio
           w-138-138>
        <img v-lazy="shopInfo.cover_pic"
             alt=""
             aspectratio-content>
      </div>
      <div class="product-info"
           border-bottom-1px>
        <div class="title">{{shopInfo.shop_name}}</div>
        <div class="star">
          <common-star :score="score"></common-star>
          <span class="iconfont icon">&#xe602;{{shopInfo.looks}}</span>
        </div>
        <div class="address">商家地址：{{shopInfo.district}}{{shopInfo.address}}</div>
      </div>
      <common-location :distance="Number(shopInfo.distance)"></common-location>
    </div>
    <div class="coupon-wrap">
      <div class="coupon">
        <div class="discount">
          <span class="iconfont icon">&#xe624;</span>
          <div class="desc">大微折扣券</div>
        </div>
        <div class="free">
          <span class="iconfont icon">&#xe66e;</span>
          <div class="desc">大微免费券</div>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
import CommonStar from 'common/star/Star'
import CommonLocation from 'common/location/Location'
export default {
  name: 'CommonProduct',
  components: {
    CommonStar,
    CommonLocation
  },
  props: {
    shopInfo: {
      type: Object
    }
  },
  methods: {
    handleclick (shopInfo) {
      if (shopInfo.href) {
        this.$emit('skip', shopInfo.href)
      }
    }
  },
  computed: {
    score () {
      return parseInt(this.shopInfo.composite_score)
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~stylus/variable.styl'
@import '~stylus/mixins.styl'

.product-wrapper
  display flex
  padding()
  width 100%
  flex-wrap wrap

.content-wrap
  width 100%
  display flex
  position relative
  flex 1

  .img-wrap
    width 138px
    height 138px
    border-radius 8px

  [border-radius]::before
    border-color $graySecond
    border-radius 8px

  .product-info
    flex 1
    min-width 0
    margin-left 20px
    box-sizing border-box
    padding-bottom 20px

    .title
      padding-right 20px
      box-sizing border-box
      line-height 42px
      font-size $fzSecond
      color $fzColor
      ellipsis()

    .star
      display flex
      align-items center
      height 53px

      .icon
        color #F44336
        margin-left 25px
        font-size $smallFz
        margin-right 8px

      .score
        font-size $smallFz
        color $graySecond
        margin-left 25px

    .address
      padding-right 20px
      box-sizing border-box
      font-size $smallFz
      line-height 28px
      color $grayFourthly
      ellipsis()

  .location
    position absolute
    top 50px
    right 80px

    .icon
      font-size $smallFz
      color $graySecond

.coupon-wrap
  height 70px

  .coupon
    height 100%
    margin-left 160px
    width calc(100% - 188px)
    display flex

    .discount, .free
      display flex
      align-items center

      .icon
        border-radius 2px
        line-height 30px
        text-align center
        font-size $fzThird
        margin-right 12px

      .desc
        color $grayFifth
        font-size $smallFz
        white-space nowrap

    .discount
      margin-right 70px

      .icon
        color #FFA133

    .free
      .icon
        color #0AB881
        margin-top 6px
</style>
